<template>
  <el-pagination
    v-model:current-page="paginationData.pageIndex"
    v-model:page-size="paginationData.pageSize"
    :page-sizes="[10, 50, 100, 200, 300, 400]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
// import { ref, reactive } from 'vue'

// 暴露props
interface props {
  // 总条目数
  total: number;
  // 当前页
  pageIndex: number;
  // 页数
  pageSize: number;
}
const props = defineProps<props>();

let paginationData = reactive({
  pageIndex: props.pageIndex,
  pageSize: props.pageSize,
});

const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const emits = defineEmits(["change", "update:pageSize", "update:pageIndex"]);

const handleSizeChange = (val: number) => {
  emits("update:pageSize", val);
  emits("change", paginationData);
};

const handleCurrentChange = (val: number) => {
  emits("update:pageIndex", val);
  emits("change", paginationData);
};
</script>
